<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue组件data函数形式</title>
</head>
<body>
  <div id="demo">
    <h1>Vue组件data为什么必须是个函数？</h1>
    <comp></comp>
    <comp></comp>
  </div>

  <script src="/vue.js"></script>
  <script>
    Vue.component('comp', {
      template: `<div @click="counter++">{{counter}}</div>`,
      // 正确的 组件初始化 data
      data() {
        return { counter: 1 }
      }
    })

    const app = new Vue({
      el: '#demo',
      // Vue 根实例 初始化 data
      data: { counter: 1 }
    })
  </script>
</body>
</html>